<!DOCTYPE html>
<html>
<head>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1" />
    <title>安装程序 - yfcmfvue</title>
<!--    <link rel="icon" type="image/x-icon" href="INSTALL_IMG/shop_bitbug_favicon.ico" />-->
    <link rel="stylesheet" type="text/css" href="/install/css/style.css" />
    <link rel="stylesheet" type="text/css" href="/install/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="/install/css/common.css" />
<!--    <script src="/install/js/jquery-3.1.1.js"></script>-->
    <script src="/assets/libs/jquery/dist/jquery.js"></script>
    <script src="/install/js/layui.js"></script>

    <script>
        layui.use(['layer', 'upload', 'element'], function() {});
    </script>
    {block name="resources"}{/block}
</head>

<body>
<div class="head-block">
    <div class="top">
        <div class="top-logo">
            <div class="top-logo-img">
                <img src="/install/img/logo.png">
            </div>
            <span class="bar">|</span>
            <span class="logo-text">快速开发通用管理后台框架</span>
        </div>
        <div class="top-sub" style="flex:1;"></div>
        <ul class="top-link">
            <li><a href="https://www.niucloud.com/" target="_blank">官方网站</a></li>
            <li><a href="https://bbs.niucloud.com/" target="_blank">技术论坛</a></li>
        </ul>
    </div>
</div>
<div class="step-content">
    <div style="width:1000px;margin:0 auto;">

        <!--  标题进度条 start-->
        <div class="content" style="margin:30px 0 0 0;width: 100%;">
            <div class="processBar">
                <div class="text" style="margin: 10px -25px;"><span class='poetry'>1.许可协议</span></div>
                <div id="line0" class="bar">
                    <div id="point0" class="c-step c-select"></div>
                </div>

            </div>
            <div class="processBar">
                <div class="text" style="margin: 10px -30px;"><span class='poetry'>2.环境检测</span></div>
                <div id="line1" class="bar">
                    <div id="point1" class="c-step"></div>
                </div>
            </div>
            <div class="processBar">
                <div class="text" style="margin: 10px -30px;"><span class='poetry'>3.参数配置</span></div>
                <div id="line2" class="bar">
                    <div id="point2" class="c-step"></div>
                </div>
            </div>
            <div class="processBar" style="width:10px;">
                <div class="text" style="margin: 10px -39px;"><span class='poetry'>4.安装完成</span></div>
                <div id="line3" class="bar" style="width: 0;">
                    <div id="point3" class="c-step"></div>
                </div>
            </div>
        </div>
        <!--  标题进度条 end-->
        <div style="clear: both;"></div>
    </div>
</div>
<div class="install-content">
    {block name='main'}{/block}
</div>

<script>
    var index=0;
    $(document).ready(function(){
        $("#education").addClass('main-hide');
        $("#work").addClass('main-hide');
        $("#social").addClass('main-hide');
        $('#previous_step').hide();

        /*上一步*/
        $('#previous_step').bind('click', function () {
            index--;
            ControlContent(index);
        });
        /*下一步*/
        $('#next_step').bind('click', function () {
            index++;
            ControlContent(index);
        });

    });

    function ControlContent(index) {
        var stepContents = ["basicInfo","education","work","social"];
        var key;//数组中元素的索引值
        for (key in stepContents) {
            var stepContent = stepContents[key];//获得元素的值
            if (key == index) {
                if(stepContent=='basicInfo'){
                    $('#previous_step').hide();
                }else{
                    $('#previous_step').show();
                }
                if(stepContent=='social'){
                    $('#next_step').hide();
                }else{
                    $('#next_step').show();
                }
                $('#'+stepContent).removeClass('main-hide');
                $('#point'+key).addClass('c-select');
                $('#line'+key).removeClass('b-select');
            }else {
                $('#'+stepContent).addClass('main-hide');
                if(key>index){
                    $('#point'+key).removeClass('c-select');
                    $('#line'+key).removeClass('b-select');
                }else if(key<index){
                    $('#point'+key).addClass('c-select');
                    $('#line'+key).addClass('b-select');
                }
            }
        }

    }

    function success(message){
        layer.alert(message, {
            icon: 1,
            skin: 'layer-ext-moon',
            title:'提示'
        })
    }
    function error(message){
        layer.alert(message, {
            icon: 2,
            skin: 'layer-ext-moon',
            title:'提示'
        })
    }
</script>
{block name="script"}{/block}
</body>
</html>